<template>
    <!-- 背景音乐对话框 -->
    <el-dialog
      class="BackgroundMusic-dialog"
      title="背景音乐"
      v-model="dialogVisible"
      width="80%"
      center
    >
      <!-- 选项卡 -->
      <el-tabs v-model="activeName" class="BackgroundMusic-tabs">
        <!-- 我的音乐标签页 -->
        <el-tab-pane label="我的" name="my">
          <BackgroundMusicContent :songs="songs"/>
        </el-tab-pane>
        <!-- 热门音乐标签页 -->
        <el-tab-pane label="热门" name="hot">
          <BackgroundMusicContent :songs="songs"/>
        </el-tab-pane>
        <!-- 广告音乐标签页 -->
        <el-tab-pane label="广告" name="ad">
          <BackgroundMusicContent :songs="songs" />
        </el-tab-pane>
        <!-- 喜庆音乐标签页 -->
        <el-tab-pane label="喜庆" name="happy">
          <BackgroundMusicContent :songs="songs"/>
        </el-tab-pane>
        <!-- 抒情音乐标签页 -->
        <el-tab-pane label="抒情" name="romantic">
          <BackgroundMusicContent :songs="songs"/>
        </el-tab-pane>
        <!-- 外语音乐标签页 -->
        <el-tab-pane label="外语" name="foreign">
          <BackgroundMusicContent :songs="songs"/>
        </el-tab-pane>
        <!-- 震撼音乐标签页 -->
        <el-tab-pane label="震撼" name="shocking">
          <BackgroundMusicContent :songs="songs"/>
        </el-tab-pane>
        <!-- 史诗音乐标签页 -->
        <el-tab-pane label="史诗" name="epic">
          <BackgroundMusicContent :songs="songs"/>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>
  </template>
  
  <script lang="ts">
   export default {
    name: "BackgroundMusic"
  };
  </script>

  <script setup lang="ts">
  import { ref } from 'vue';
  import BackgroundMusicContent from './BackgroundMusicContent.vue';
  import {ISong,Song} from '../../../src/composables/types'
  
  // 控制对话框可见性的变量
  const dialogVisible = ref(false);
  // 当前激活的选项卡名称
  const activeName = ref('my');

  // 暴露dialogVisible变量以便外部访问
  defineExpose({
    dialogVisible
  })

  // 歌曲列表，包含歌曲的图标、名称和音频源路径
  const songs = ref<ISong[]>([
    {id:1, icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg', title: 'Song 1', audioSrc: 'https://frp.qianbianwanhua.vip/10月22日.WAV' },
    {id:2, icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg', title: 'Song 2', audioSrc: 'https://frp.qianbianwanhua.vip/10月22日.WAV' },
    {id:3,  icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg', title: 'Song 3', audioSrc: 'https://frp.qianbianwanhua.vip/10月22日.WAV' },
    {id:4,  icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg', title: 'Song 4', audioSrc: 'https://frp.qianbianwanhua.vip/10月22日.WAV' },
]);    

</script>
  
  <style scoped>
  /* 对话框样式 */
  .BackgroundMusic-dialog {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  /* 选项卡样式 */
  .BackgroundMusic-tabs {
    width: 100%;
  }
  </style>